<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>140_属性节点</title>

	</head>
	<body>
		<input type="text" name="username" value="admin" />
		<script>
			/* 
				属性节点(Attr)
					- 在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作;
					如何操作属性节点:
						方式一:
							读取:元素.属性名(注意，class属性需要使用className来读取)
								 读取一个布尔值时，会返回true或false
								 布尔值时建议将属性值设置为属性名
							修改: 元素.属性名=属性值
							
						方式二:
							读取:元素.getAttribute(属性名)
							修改:元素.setAttribute(属性名，属性值)
							删除:元素.removeAttribute(属性名)
			 */
			//获取input
			let input = document.getElementsByName("username")[0]
			//[name=username]是属性选择器
			input = document.querySelector("[name=username]")

			let attr = input.type;
			attr = input.getAttribute("name")
			input.setAttribute("value", "猪八戒")
			////布尔值,将属性值设置为属性名
			//如果可用，就直接把属性删除
			input.setAttribute("disabled", "disabled") 
			console.log(attr);
		</script>
	</body>
</html>